<template>
    <div class="prompt-templates-container">
        <el-card class="prompt-card">
            <template #header>
                <div class="card-header">
                    <div class="header-left">
                        <el-icon class="header-icon"><Edit /></el-icon>
                        <span>Prompt模板管理</span>
                    </div>
                </div>
            </template>
            <el-table 
                :data="promptList" 
                style="width: 100%"
                :header-cell-style="{ 
                    background: '#f5f7fa',
                    color: '#606266',
                    fontWeight: 500
                }"
                v-loading="loading"
            >
                <el-table-column prop="name" label="模板名称" >
                    <template #default="{ row }">
                        <div class="template-name">
                            <el-icon><Document /></el-icon>
                            <span>{{ row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip />
                <el-table-column prop="updateTime" label="更新时间" align="center" />
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="scope">
                        <el-button 
                            type="primary" 
                            link
                            @click="handleEdit(scope.row)"
                        >
                            编辑内容
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog 
            :title="dialog.title" 
            v-model="dialog.visible" 
            width="800px"
            destroy-on-close
        >
            <el-form :model="form" label-width="100px">
                <el-form-item label="模板名称">
                    <el-input v-model="form.name" disabled />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input 
                        v-model="form.description" 
                        type="textarea" 
                        rows="2" 
                        disabled 
                        resize="none"
                    />
                </el-form-item>
                <el-form-item label="Prompt内容">
                    <el-input 
                        v-model="form.content" 
                        type="textarea" 
                        rows="12"
                        resize="none"
                        placeholder="请输入Prompt内容..."
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialog.visible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Edit } from '@element-plus/icons-vue'
import request from '@/utils/request'

const loading = ref(false)
const promptList = ref([])

// 获取Prompt列表
const getPrompts = async () => {
    loading.value = true
    try {
        const res = await request({
            url: '/lm/prompt/list',
            method: 'get'
        })
        console.log(res.data)
        promptList.value = res.data
    } catch (error) {
        console.error('获取Prompt列表失败:', error)
    } finally {
        loading.value = false
    }
}

// 对话框相关
const dialog = reactive({
    visible: false,
    title: ''
})

const form = reactive({
    type: '',
    name: '',
    description: '',
    content: '',
    updateTime: '',
})

const handleEdit = (row) => {
    dialog.title = `编辑 ${row.name} 内容`
    dialog.visible = true
    Object.assign(form, row)
    form.updateTime = new Date().toLocaleDateString()
}

const handleSave = async () => {
    try {
        await request({
            url: `/lm/prompt/update/${form.type}`,
            method: 'put',
            data: form
        })
        
        ElMessage.success('保存成功')
        dialog.visible = false
        
        await getPrompts()
    } catch (error) {
        console.error('保存失败:', error)
    }
}

onMounted(() => {
    getPrompts()
})
</script>

<style scoped>
.prompt-templates-container {
    padding: 20px;
    height: 100%;
}

.prompt-card {
    height: 100%;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.header-icon {
    font-size: 18px;
    color: #409EFF;
}

.template-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 表格和对话框样式优化 */
:deep(.el-table) {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-fill-color-light);
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-fill-color-light);
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
</style> 